<script setup lang="ts">
import { ref } from 'vue'
import { answerList, puzzleList } from '@/assets/metaphor.json'
import MultipleChoice from '@/components/multiple-choice.vue'
import { shuffleArray, swapElements } from '@/utils'

const startIndex = ref(0)
const BatchSize = 50
const onSuccess = () => {
  startIndex.value += BatchSize
  if (startIndex.value > puzzleList.length) {
    startIndex.value = 0
  }
  console.log(startIndex.value)
}

const shuffleList = () => {
  const shuffled = shuffleArray(
    Array.from({ length: answerList.length / 2 }).map(
      (_, i) => i + Math.round(answerList.length / 2)
    )
  )
  for (let i = 0; i < shuffled.length; i++) {
    swapElements(answerList, i, shuffled[i])
    swapElements(puzzleList, i, shuffled[i])
  }
  console.log(shuffled)
}

shuffleList()
</script>

<template>
  <MultipleChoice
    :answer-list="answerList"
    :puzzle-list="puzzleList"
    @success="onSuccess"
  ></MultipleChoice>
  <!-- <MultipleChoice
    :answer-list="answerList.slice(startIndex, startIndex + BatchSize)"
    :puzzle-list="puzzleList.slice(startIndex, startIndex + BatchSize)"
    @success="onSuccess"
  ></MultipleChoice> -->
</template>
